<template>
  <div class="tech01">
    <h2>name = {{ name }}</h2>
    <h2>sex = {{ sex }}</h2>
    <h2>age = {{ age }}</h2>
    <button @click="sayHello">say Hello</button>
    <button @click="sayWorld">say sayWorld</button>
    <button @click="proxyOp">proxyOp</button>
    <button @click="proxyOp">reflectOp</button>
  </div>
</template>

<script >
export default {
  name: "TechProxy",
  data() {
    return {
      sex: "男",

    }
  },
  methods: {
    sayHello() {
      alert("hello !!!")
    },

    proxyOp() {
      let person = {
        name: "王五",
        age: 20
      }
      let p = new Proxy(person, {
        get(target, propName) {
          console.log("Proxy获取属性" + propName)
          return target[propName];
        },
        set(target, propName, value) {
          console.log("Proxy更改属性" + propName)
          return target[propName] = value;
        },
        deleteProperty(target, propName) {
          console.log("Proxy删除属性" + propName)
          delete target[propName];
        },
      });
      p.name
      p.age = 30
      delete p.age
    },

    reflectOp() {
      let person = {
        name: "王五",
        age: 20
      }
      let p = new Proxy(person, {
        get(target, propName) {
          console.log("reflect获取属性" + propName)
          return Reflect.get(target, propName)
        },
        set(target, propName, value) {
          console.log("reflect更改属性" + propName)
          return Reflect.set(target, propName, value);
        },
        deleteProperty(target, propName) {
          console.log("reflect删除属性" + propName)
          return Reflect.deleteProperty(target, propName);
        },
      });
      p.name
      p.age = 30
      delete p.age
    }
  },
  setup() {
    let name = '张三'
    let age = 18
    function sayWorld() {
      alert("world !!!")
    }
    return {
      name,
      age,
      sayWorld
    }
  }
}

</script>

<style scoped>
@media (min-width: 1024px) {
  .tech01 {
    min-height: 100vh;
    align-items: center;
  }
}
</style>
